<template>
	<!-- 三级分类 -->
	<view class="card_grid">
		<view v-if="list && list.length>0" class="card_grid-grid">
			<view @click="$emit('handle',item)" class="bg-white radius padding-xs" v-for="item in list" :key="item.id">
				<view class="card_grid-image radius" :class="[item.cover ? '' : 'rloading']">
					<image :src="item.cover" mode="aspectFill"></image>
					<view v-if="item.bookCnt || item.pages" class="card_grid-count text-sm">
						{{item.bookCnt || item.pages}}{{(type == 'ChineseBookshelf' || type == 'EnglishBookshelf') ? '本' : '页' }}
					</view>
					<!-- 未读NEVER_READ、未完成 READING、已完成 "FINISHED" -->
					<view v-if="(type=='learnClock' || type=='Picture'|| type=='Bookcase' || type=='Collect' || type=='ReadHistory')  && item.state" class="card_grid-state text-sm text-center"
						:class="[item.state=='READING' ? 'text-orange' : item.state=='FINISHED' ? 'text-green' : 'text-white']">
						{{item.state | stateFilter}}
					</view>
				</view>
				<view v-if="item.name" class="text-cut margin-top-xs">{{item.name}}</view>
				<view v-else style="height: 40upx;" class="rloading margin-top-xs"></view>
				<view class="flex margin-top-xs align-center justify-between">
					<view v-if="item.author" class=" text-gray text-cut text-sm">作者：{{item.author}}</view>
					<view v-else style="height: 30upx;width: 100upx;" class="rloading"></view>
					<text v-if="type!='Picture' && type!='Del' && type!='learnClock' && type!='EarGrinding' && item.id" @click.stop="$emit('delete',item)"
						class="cuIcon-delete text-right"></text>
					<text v-if="type=='Picture'&& item.id" @click.stop="$emit('add',item)"
						class="cuIcon-add text-right"></text>
					<text v-if="type=='Del' && item.id " @click.stop="$emit('recover',item)"
						class="cuIcon-refresh text-orange text-right"></text>
				</view>
			</view>
		</view>
	    <Divider v-else  text="暂无数据" />
	</view>
</template>
<script>
	import Divider from './divider.vue';
	export default {
		components:{
			Divider
		},
		props: {
			list: Array,
			type: String
		},
		filters: {
			stateFilter(val) {
				// 未读NEVER_READ、未完成 READING、已完成 "FINISHED"
				switch (val) {
					case 'READING':
						return '未完成';
					case 'FINISHED':
						return '已完成';
					default:
						return '未读'
				}
			}
		}
	}
</script>

<style lang="scss">
	.card_grid {
		width: 100vw;
		padding: 0 30upx;
		box-sizing: border-box;

		.card_grid-grid {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(3,calc(100% / 3 - 20upx / 3));
			grid-gap: 20upx 10upx;

			>view {

				// min-height: 380upx;
				>view {
					width: 100%;
					overflow: hidden;
				}

				.card_grid-image {
					height: 260upx;
					width: 100%;
					position: relative;

					>image {
						width: 100%;
						height: 100%;
					}

					.card_grid-count {
						position: absolute;
						left: 0;
						top: 0;
						background-color: rgba(0, 0, 0, 0.5);
						color: #fff;
						padding: 5upx 20upx;
						border-radius: 0 0 20upx 0;
					}

					.card_grid-state {
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
						background-color: rgba(0, 0, 0, 0.5);
						padding: 5upx 0upx;
					}
				}

			}
		}

	}
</style>